<template>
  <div :title="this.card.name">
    <span class="plan-time">{{ this.theTime }}</span>
    <div class="jindu">
      <div class="plan-title">
       <span >{{ this.card.name | ellipsis }}</span>

      </div>
      <div class="plan-jindu">
          <el-tag class="time-title" v-if="isShow">时间进度</el-tag>
          <el-tag class="time-title"  type="success" v-else>已结束</el-tag>
      <el-progress
      class="title-poss"
        :text-inside="true"
        :stroke-width="24"
        :percentage="pross"
        v-if="isShow"

      ></el-progress>
            <el-progress
      class="title-poss"
        :text-inside="true"
        :stroke-width="24"
        percentage="100"
        v-else
        status="success"
      ></el-progress>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  inject: ["reload"],
  name: 'CardPlan',
  props: {
    cardInfo: {
      type: Object
    }
  },
  filters: {
    // 超出一定字数显示省略号的过滤器
    ellipsis (val) {
      if (!val) return ''
      if (val.length > 6) {
        return val.slice(0, 6) + '...'
      }
      return val
    },
  },
  data () {
    return {
      // 当前卡片信息
      card: this.cardInfo,
      // 开始时间
      starTime: new Date(this.cardInfo.createtime).valueOf(),
      // 结束时间
      endTime: new Date(this.cardInfo.deadline).valueOf(),
      // 计划持续时间
      allTime: '',
      // 进度条数据
      pross: 0,
      // 间隔时间
      IntervalTime: 1000,
      isShow: true,
      theTime: ''
    }
  },
  created () {
    // 算出持续总时间
    this.allTime = Math.abs(this.endTime - this.starTime)
    // 间隔时间 ms级
    this.IntervalTime = this.allTime / 100
    const s = this.cardInfo.createtime.split(' ')
    this.theTime = s[0]
    // 计算初始值
    this.getProgess()
    if (this.card.state === '已过期') {
      this.isShow = false
      window.clearInterval(this.timeOut);
    } else if (this.pross !== 100) {
      if (this.pross < 0) {
        this.isShow = false
        this.pross = 100
      }
      // 进度条未满显示进度
      this.isShow = true
      this.setTime()
    } else {
      // 进度条已满显示100
      this.isShow = false
      window.clearInterval(this.timeOut);
    }
  },
  methods: {
    // 计算进度值
    getProgess () {
      const now = new Date().valueOf();
      // 计算进度并取整
      this.pross = parseInt((now - this.starTime) / this.allTime * 100);
      if (this.pross >= 100) {
        this.pross = 100
      }
    },
    // 获取时间
    setTime () {
      this.timeOut = setInterval(() => {
        setTimeout(() => {
          if (this.pross === 100) {
            window.clearInterval(this.timeOut);
            location.reload()
          } else {
            this.getProgess()
          }
        }, 0)
      }, this.IntervalTime)
    },
    destroyed () {
      window.clearInterval(this.timeOut);
    },
  },
}
</script>
<style lang='less' scoped>
    .plan-time{
      font-size: 12px;
      font-weight: normal;
    }
    .jindu{
      display: flex;
        height: 30px;
      .plan-title{
        display: inline-block;
        margin-top: 0;
        line-height: 30px;
        font-size: 14px;
        flex: 1;

      }
      .plan-jindu{
        flex: 3;
        display: flex;
      .time-title{
        flex: 1;
        line-height: 30px;
        text-align: center;
        padding: 0;
        margin-right: 5px;
        }
        .title-poss{
          flex: 3;
        }
      }

      .el-progress{
        line-height: 0;
      }
      /deep/.el-progress-bar__innerText{
        color: #000;
      }
    }</style>
